<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <link rel="stylesheet" href="../css/railView.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
    <style>
        .el-button--medium {
            padding: 10px;
        }
        .el-card__body, .el-main {
            padding: 0;
        }
        .box-card {
            width: 35%;
            position: absolute;
            left: 1vw;
            top: 50px;
        }
        .clearfix {
            font-size: 18px;
        }
        .el-card__header {
            padding: 15px;
            background-color: #f5f5f5;
        }
        .close-btn {
            float: right; 
            padding: 0; 
            font-size: 25px;
            color: #666666;
        }
        .card-container {
            padding: 15px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
            gap: 10px;
        }
        .selected {
            box-sizing: border-box;
            border: 2px solid #0081ff;
        }
        .image {
            width: 100%;
            height: 118px;
        }
        .card-name {
            padding: 7px;
            text-align: center;
            background-color: #f5f5f5;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
        }
        .position-title {
            background-color: #f5f5f5;
            padding: 15px;
            font-size: 18px;
        }
        .position-value {
            padding: 15px;
        }
        .el-collapse-item__content {
            padding: 0;
        }
        .el-collapse-item__header {
            background-color: #f5f5f5;
            padding: 0 15px;
            font-size: 18px;
        }
        .el-collapse-item__wrap {
            border-bottom: none
        }
        .modelList {
            margin: 15px;
        }
        .delete {
            color: red;
            padding-right: 1em;
        }
        .operate {
            color: #0081ff;
        }
        .pointer {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" size="medium" @click="dialogFormVisible = true">构件面板</button>
        </div>
        <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
        <el-card class="box-card" v-show="dialogFormVisible">
            <div slot="header" class="clearfix">
              <span>构件参数化</span>
              <el-button class="close-btn" type="text" @click="dialogFormVisible = !dialogFormVisible">×</el-button>
            </div>
            <div class="card-container">
                <div 
                    v-for="(item, index) in modelList" 
                    :key="item.modelId" 
                    :class="currentIndex === index ? 'selected' : ''"
                    @click="handleSelected(item, index)"
                >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="item.imgPath" class="image">
                    <div class="card-name" :title="item.solidName">
                      {{ item.solidName }}
                    </div>
                  </el-card>
                </div>
            </div>
            <el-row class="position-title">位置</el-row>
            <el-row justify="space-between" class="position-value">
                <el-col :span="18">
                    坐标：
                    X <el-input size="medium" style="width: 23%;" v-model="axial.x"></el-input>
                    Y <el-input size="medium" style="width: 23%;" v-model="axial.y"></el-input>
                    Z <el-input size="medium" style="width: 23%;" v-model="axial.z"></el-input>
                </el-col>
                <el-col :span="6" justify="end" style="text-align: right;">
                    <el-button size="medium" type="primary" @click="handleInsert"> <img src="../img/check-in.svg"> 插入点坐标</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="模型列表" name="modelList">
                        <div class="modelList">
                            <el-table 
                                :data="selectedModel" 
                                border
                                style="width: 100%"
                            >
                                <el-table-column
                                    v-for="item in columns"
                                    :key="item.prop"
                                    v-bind="item"
                                    show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="length"
                                    label="长度"
                                    show-overflow-tooltip
                                >
                                    <template #default="scope">
                                    <template v-if="scope.row.editable">
                                        <el-input v-model.number="scope.row.length" size="mini" @change="saveEdit(scope.row, 'length')"></el-input>
                                    </template>
                                    <template v-else>
                                        <span @click="handleEdit(scope.row)">{{ scope.row.length }}</span>
                                    </template>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="width"
                                    label="宽度"
                                    show-overflow-tooltip
                                >
                                    <template #default="scope">
                                    <template v-if="scope.row.editable">
                                        <el-input v-model.number="scope.row.width" size="mini" @change="saveEdit(scope.row, 'width')"></el-input>
                                    </template>
                                    <template v-else>
                                        <span @click="handleEdit(scope.row)">{{ scope.row.width }}</span>
                                    </template>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="height"
                                    label="高度"
                                    show-overflow-tooltip
                                >
                                    <template #default="scope">
                                    <template v-if="scope.row.editable">
                                        <el-input v-model.number="scope.row.height" size="mini" @change="saveEdit(scope.row, 'height')"></el-input>
                                    </template>
                                    <template v-else>
                                        <span @click="handleEdit(scope.row)">{{ scope.row.height }}</span>
                                    </template>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="80" align="center">
                                    <template #default="scope">
                                    <el-tooltip content="删除构件" placement="top" effect="light">
                                        <i class="el-icon-delete delete pointer" @click="handleDel(scope.row.solid)"></i>
                                    </el-tooltip>
                                    <el-tooltip content="操控控件" placement="top" effect="light">
                                        <i class="el-icon-setting operate pointer" @click="handleOperate(scope.row.solid)"></i>
                                    </el-tooltip>
                                    </template>
                                  </el-table-column>
                            </el-table >
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-row>  
        </el-card>
    </div>
    <script id="viewerStartup" type="module">
        const vm = new Vue({
            el: '#app',
            data: {
                activeNames: ['modelList'],
                dialogFormVisible: true,
                modelView: null,
                ids: [5],
                currentIndex: -1,
                axial: {},
                currentSolid: {},
                modelList: [
                    {
                        solidName: 'GD-牵引变压器RT-通用',
                        imgPath: '../img/transformer.png',
                        position: {
                            x: 0,
                            y: 0,
                            z: 0
                        },
                        modelId: '5b905966-ecb8-4dd1-a6dd-c25388246e17',
                        selected: false,
                    },
                    {
                        solidName: '闸机-双向检票机-两台',
                        imgPath: '../img/gate.png',
                        position: {
                            x: 0,
                            y: 0,
                            z: 0
                        },
                        modelId: '8706e448-0a78-4bf0-a54d-b934ad2fc037',
                        selected: false,
                    },
                    {
                        solidName: '自动售票机',
                        imgPath: '../img/TVM.png',
                        position: {
                            x: 0,
                            y: 0,
                            z: 0
                        },
                        modelId: '2f70bca4-9744-4995-b691-8428f9665f3e',
                        selected: false,
                    }
                ],
                selectedModel: [],
                orgModelList: [], // 原始模型数据，后期缩放处理需要用到
                currentRow: {},
                columns: [
                    {
                        label: '构件',
                        prop: 'solid',
                        width: '100'
                    },
                    {
                        label: '位置信息',
                        prop: 'position',
                        width: '180'
                    }
                ]
            },
            mounted () {
                this.bimViewerFn()
            },
            methods: {
                // 初始化模型
                bimViewerFn() {
                    this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                },
                // 选择构件
                handleSelected(data,index) {
                    const { position } = data
                    this.axial = position
                    this.currentIndex = index
                    this.currentSolid = data
                },
                // 插入构件
                handleInsert() {
                    const { modelId } = this.currentSolid;
                    const { x, y, z } = this.axial;
                    this.modelView.assemblyModels(0, [modelId]).forEach( item => {
                        item.then(res => {
                            this.createModelData(res)
                            this.modelView.setSolidTranslationWithDistance(res[0], { x: Number(x), y: Number(y), z: Number(z) });
                        })
                    });      
                },
                // 获取构件信息
                async getSolids(ids) {
                    let params = {
                        length: null,
                        width: null,
                        height: null,
                        position: null,
                    }
                    // 获取构件信息
                    await this.modelView.getSolidsBounding(ids).then((data) => {
                        params.length = data.max.x - data.min.x
                        params.width = data.max.y - data.min.y
                        params.height = data.max.z - data.min.z
                    });
                    // 获取位置信息
                    await this.modelView.getSolidsCenter(ids).then((data) => {
                        params.position = `X: ${data.x},Y: ${data.y},Z: ${data.z}`
                    });
                    return params
                },
                // 新增模型数据
                async createModelData(ids) {
                    const { length, width, height, position } = await this.getSolids(ids)
                    const params = {
                        solid: ids[0],
                        length: length,
                        width: width,
                        height: height,
                        position: position,
                        editable: false
                    }
                    this.orgModelList.push(JSON.parse(JSON.stringify(params)))
                    this.selectedModel.push(params)
                },
                // 移除构件
                handleDel(solid) {
                    this.modelView.setSolidsVisibility([solid], false)
                    const deleteIndex = this.selectedModel.findIndex( i => i.solid === solid);
                    this.selectedModel.splice(deleteIndex, 1)
                    this.orgModelList.splice(deleteIndex, 1)
                },
                // 点击单元格编辑
                handleEdit(row) {
                    this.currentRow = JSON.parse(JSON.stringify(row))
                    row.editable = true; // 设置行为可编辑状态
                },
                // 保存处理
                async saveEdit(row, type) {
                    let orgSize = 0
                    let scale = 0
                    this.orgModelList.map( item => {
                        if(item.solid === row.solid) orgSize = item[type]
                    })
                    switch (type) {
                        case 'length':
                            scale = row.length / orgSize
                            break;
                        case 'width':
                            scale = row.width / orgSize
                            break;
                        case 'height':
                            scale = row.height / orgSize
                            break;
                    }
                    await this.modelView.setSolidScale(row.solid, scale);
                    row.editable = false; // 保存编辑后的数据并设置行为非编辑状态
                    setTimeout(async() => {
                        const { length, width, height, position } = await this.getSolids([row.solid])
                        row.length = length;
                        row.width = width;
                        row.height = height;
                        row.position = position;
                    }, 1000)
                },
                // 显示操控面板
                handleOperate(id) {
                    this.modelView.showOperateHandle([id]);
                }
            }
        })
    </script>
</body>
</html>
